<script setup lang="ts">
import {
  reactive,
  onMounted,
  getCurrentInstance,
  toRefs
} from 'vue';
import { positiveInteger } from '@/framework/utils/validate';
import {
  getPwdRules,
  updatePwdRules
} from '@/framework/api/systemManage/basicConfig/passWordConfig';
import { passWordRules } from '@/framework/api/systemManage/basicConfig/passWordConfig/types';
import _ from 'lodash'; // loadsh插件
const { proxy }: any = getCurrentInstance();
const state = reactive({
  radio: 1,
  loading: false,
  pwdConstituteTypeArr: [] as any,
  checkbox: false,
  configData: {} as passWordRules,
  checked: false,
  labelObj1: {
    pwdExpiryDate: '密码有效期',
    advanceDays: '提前提醒天数'
  },
  labelObj2: {
    pwdMinLength: '密码最小长度',
    pwdMaxLength: '密码最大长度'
  },
  labelObj3: {
    defaultReset: '默认重置密码'
  },
  pwdConstituteArr: [
    {
      key: 1,
      value: '包含数字'
    },
    {
      key: 2,
      value: '包含大写或小写字母'
    },
    {
      key: 3,
      value: '包含特殊字符'
    }
  ]
});
const {
  configData,
  labelObj1,
  checkbox,
  labelObj2,
  pwdConstituteTypeArr,
  pwdConstituteArr,
  labelObj3,
  loading
} = toRefs(state);
onMounted(async () => {
  await initData();
});
function pwdChange() {
  if (state.configData.pwdIsExpired == 'N') {
    state.checkbox = false;
  }
}
async function initData() {
  const { data } = await getPwdRules();
  state.configData = data;
  if (state.configData.advanceDays != 0) {
    state.checkbox = true;
  } else {
    state.checkbox = false;
  }
  state.configData.pwdIsExpired = data.pwdIsExpired;
  state.pwdConstituteTypeArr = dealPwd(data.pwdConstituteType, 'num');
  // state.pwdConstituteTypeArr = state.configData.pwdConstituteType
}
async function saveConfig() {
  if (document.getElementsByClassName('msg_error').length > 0) return;
  let con: passWordRules;
  con = _.cloneDeep(state.configData);
  con.pwdIsExpired = state.configData.pwdIsExpired;
  if (con.pwdIsExpired == 'N') {
    con.advanceDays = 0;
  }
  if (!state.checkbox) {
    con.advanceDays = 0;
    con.expiredIsInform = 'N';
  } else {
    con.expiredIsInform = 'Y';
  }
  con.pwdConstituteType = dealPwd(state.pwdConstituteTypeArr);
  state.loading = true;
  try {
    await updatePwdRules(con);
    await initData();
    proxy.$modal.msgSuccess('配置生效!');
    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
}
// function dealYN(data: string) {
//   if (data == 'Y') {
//     return true;
//   } else if (data == 'N') {
//     return false;
//   } else if (data) {
//     return 'Y';
//   } else {
//     return 'N';
//   }
// }

function dealPwd(data: number | number[], type?: string) {
  if (type == 'num') {
    let num: Array<number> = [];

    switch (data) {
      case 1:
        num = [1];
        break;
      case 2:
        num = [2];
        break;
      case 3:
        num = [3];
        break;
      case 4:
        num = [1, 2];
        break;
      case 5:
        num = [1, 3];
        break;
      case 6:
        num = [2, 3];
        break;
      case 7:
        num = [1, 2, 3];
        break;
    }
    return num;
  } else {
    let num = 0;
    let aaa: any = data;
    aaa.sort((a: number, b: number) => a - b);
    switch (JSON.stringify(data)) {
      case JSON.stringify([1]):
        num = 1;
        break;
      case JSON.stringify([2]):
        num = 2;
        break;
      case JSON.stringify([3]):
        num = 3;
        break;
      case JSON.stringify([1, 2]):
        num = 4;
        break;
      case JSON.stringify([1, 3]):
        num = 5;
        break;
      case JSON.stringify([2, 3]):
        num = 6;
        break;
      case JSON.stringify([1, 2, 3]):
        num = 7;
        break;
    }
    return num;
  }
}

function initPositiveInteger(data: number) {
  return positiveInteger(data);
}
function initPositive() {
  return "value=value.replace(/[^\x00-\xff]/g, '')";
}
function cancel() {
  initData();
}
</script>
<template>
  <div class="app-container">
    <div
      class="mainbox"
      style="
        height: 100%;
        background: #fff;
        border-radius: 4px;
        position: relative;
        margin: 16px;
      "
    >
      <div ref="tabledivRef" class="tablediv">
        <div class="msg_item">
          <div class="msgtitle">
            <span>密码定期更新</span>
          </div>
          <div v-if="configData.pwdIsExpired">
            <div class="msgcontent msg_content_flex msg">
              <div class="msgname msg_label">定期更新</div>
              <div class="msg_body">
                <el-radio-group
                  v-model="configData.pwdIsExpired"
                  @change="pwdChange"
                >
                  <el-radio :label="'Y'">开启</el-radio>
                  <el-radio :label="'N'">关闭</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="msgcontent msg_content_flex">
              <div class="msgname msg_label">{{ labelObj1.pwdExpiryDate }}</div>
              <div class="msg_body">
                <el-input
                  v-model.number="configData.pwdExpiryDate"
                  :class="{ msg_error: !configData.pwdExpiryDate }"
                  :oninput="initPositiveInteger(5)"
                  placeholder=""
                  :disabled="configData.pwdIsExpired == 'N'"
                /><span class="msg_company">天</span>
              </div>
            </div>
            <div class="msgcontent msg_content_flex">
              <el-checkbox
                v-model="checkbox"
                :disabled="configData.pwdIsExpired == 'N'"
              >
                <div class="msgname msg_label" style="line-height: 36px">
                  {{ labelObj1.advanceDays }}
                </div>
                <div class="msg_body">
                  <el-input
                    v-model.number="configData.advanceDays"
                    :class="{ msg_error: checkbox && !configData.advanceDays }"
                    :oninput="initPositiveInteger(5)"
                    placeholder=""
                    :disabled="configData.pwdIsExpired == 'N'"
                  /><span
                    class="msg_company"
                    style="font-size: 16px; color: #333333"
                    >天</span
                  >
                  <span class="msg_tip"
                    >说明：系统将在到期前的{{
                      configData.advanceDays
                    }}天，用户登录时提醒用户更新。</span
                  >
                </div>
              </el-checkbox>
            </div>
            <div
              v-if="
                !configData.pwdExpiryDate ||
                (checkbox &&
                  !configData.advanceDays &&
                  configData.pwdIsExpired == 'Y')
              "
              class="msg_error el-form-item__error"
            >
              输入项不能为空
            </div>
          </div>
        </div>
        <div class="msg_item">
          <div class="msgtitle">
            <span>密码强度限制</span>
            <span class="msg_tip">提示：密码最小长度为4位，最大长度为20位</span>
          </div>
          <div class="msgcontent msg_content_flex msg">
            <div class="msgname msg_label">{{ labelObj2.pwdMinLength }}</div>
            <div class="msg_body">
              <el-input
                v-model.number="configData.pwdMinLength"
                :class="{ msg_error: !configData.pwdMinLength }"
                :oninput="initPositiveInteger(2)"
                placeholder=""
              /><span class="msg_company">位</span>
            </div>
          </div>
          <div class="msgcontent msg_content_flex msg">
            <div class="msgname msg_label">{{ labelObj2.pwdMaxLength }}</div>
            <div class="msg_body">
              <el-input
                v-model.number="configData.pwdMaxLength"
                :class="{ msg_error: !configData.pwdMaxLength }"
                :oninput="initPositiveInteger(2)"
                placeholder=""
              /><span class="msg_company">位</span>
            </div>
          </div>
          <div class="msgcontent msg_content_flex msg">
            <div class="msgname msg_label">密码字符组成</div>
            <div class="msg_body">
              <el-checkbox-group
                v-model="pwdConstituteTypeArr"
                :min="2"
                :max="3"
              >
                <el-checkbox
                  v-for="item in pwdConstituteArr"
                  :key="item.key"
                  :label="item.key"
                  >{{ item.value }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <div
            v-if="!pwdConstituteTypeArr"
            class="msg_error el-form-item__error"
          >
            密码字符组成至少包含两种
          </div>
          <div
            v-if="!configData.pwdMinLength || !configData.pwdMaxLength"
            class="msg_error el-form-item__error"
          >
            输入项不能为空
          </div>
          <div
            v-else-if="
              parseInt(configData.pwdMinLength + '') >
              parseInt(configData.pwdMaxLength + '')
            "
            class="msg_error el-form-item__error"
          >
            密码最小长度不可大于最大长度
          </div>
          <div
            v-else-if="configData.pwdMinLength < 4"
            class="msg_error el-form-item__error"
          >
            密码最小长度不可小于4位
          </div>
          <div
            v-else-if="configData.pwdMaxLength > 20"
            class="msg_error el-form-item__error"
          >
            密码最大长度不可大于20位
          </div>
        </div>
        <div class="msg_item">
          <div class="msgtitle">
            <span>密码重置</span>
          </div>
          <div>
            <div class="msgcontent msg_content_flex msg">
              <div class="msgname msg_label">{{ labelObj3.defaultReset }}</div>
              <div>
                <el-input
                  v-model="configData.defaultPwd"
                  style="width: 490px"
                  :class="{ msg_error: !configData.defaultPwd }"
                  :oninput="initPositive()"
                  placeholder=""
                  maxlength="20"
                  show-word-limit
                  class="limit"
                />
              </div>
              <div
                v-if="!configData.defaultPwd"
                class="msg_error el-form-item__error"
              >
                请输入默认重置密码
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="glo-topsearch">
        <el-button type="primary" :loading="loading" @click="saveConfig"
          >保存配置</el-button
        >
        <el-button @click="cancel()">取消</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//密码配置策略页面样式
.tablediv {
  .msg_item {
    position: relative;
    margin-bottom: 20px;
    .msg_content_flex {
      display: flex;
      .msg_body {
        .el-input {
          width: 80px;
          // margin-left: 16px;
        }
        .msg_company {
          margin-left: 12px;
        }
        .el-select {
          .el-input {
            width: 120px;
          }
        }
      }
    }
    .msg_error.el-form-item__error {
      padding-left: 20px;
      z-index: 100;
      margin-top: 8px;
    }
    .msg_error {
      input {
        border-color: #f56c6c;
      }
    }
    .msg_tip {
      font-size: 14px;
      color: #999999;
      font-weight: 400;
      margin-left: 24px;
      color: #ffb942;
    }
  }
}
//说明 提示 文本样式
.msg_tip_red {
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
/* 搜索栏 */
.glo-topsearch {
  padding: 0 170px;
  height: 80px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
}
.glo-topsearch > div:nth-child(2) {
  display: flex;
  overflow: hidden;
}
.top-title {
  position: relative;
  /* border-left:4px solid #5688E8; */
  padding-left: 12px;
  height: 20px;
  color: #666;
  font-weight: bold;
  line-height: 20px;
  margin: 24px 0;
  white-space: nowrap;
  margin-right: 10px;
}
.top-title:after {
  position: absolute;
  content: '';
  height: 14px;
  left: 0;
  top: 3px;
  width: 4px;
  border-left: 4px solid #5688e8;
}
.top-title-noborder:after {
  border-left: none;
  content: '';
}
.glo-topsearch .el-input {
  width: 200px;
  margin-right: 10px;
}
/* table */
.tablediv {
  position: relative;
  height: calc(100% - 160px);
  padding: 0 40px;
  padding-bottom: 5px;
}
/* 描述 */
.tablediv .msgtitle {
  width: 100%;
  height: 64px;
  // background: #fafafa;
  padding-left: 20px;
  box-sizing: border-box;
  color: #333;
  font-weight: bold;
  line-height: 64px;
  border-bottom: solid 1px #efefef;
  padding-bottom: 8px;
}
.tablediv .msgcontent {
  width: 100%;
  height: 56px;
  background: #fff;
  padding-left: 20px;
  box-sizing: border-box;
  color: #333;
  line-height: 56px;
  margin-top: 16px;
  // margin-bottom:16px;
  // border-bottom:solid 1px #efefef;
}
.tablediv .msg:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
.tablediv .msgcontent:hover {
  background: #f0f4fb;
}
.tablediv .msgcontent .msgname {
  float: left;
  color: #999;
  // width: 176px;
}
.tablediv .msgcontent .msg_label {
  float: left;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  padding-right: 16px;
  // line-height: 56px;
  // margin-bottom: 16px;
}
.tablediv .msgcontentdes {
  display: inline-block;
  width: calc(100% - 200px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// .el-checkbox__label{
//   line-height: 56px;
// }
</style>
